<template>
  <div>
    <!--    回到顶端按钮-->
<!--    <img id="top" v-if="isTopShow" src="../../assets/imgs/top.png" alt="" @click="goTop">-->
    <!--  顶部导航栏区域-->
    <div class="sn">
      <p class="sn-login-info">
        <em>欢迎来到在线商城</em>
        <a v-if="!$store.state.user" @click="toLogin" class="sn-login">请登录</a>
        <a v-if="$store.state.user"  class="sn-login-a">您已登录</a>
        <a v-if="$store.state.user" @click="toLoginOut" class="sn-login" style="cursor: pointer">退出登录</a>
        <a v-if="!$store.state.user" @click="toReg" class="sn-register">免费注册</a>
      </p>
      <ul class="sn-quick-menu">
        <li class="sn-myshop">
          <a >我的商城</a>
          |
        </li>
        <li class="sn-mycart">
          <a @click='toCart'>我的购物车</a>
          |
        </li>
        <li v-if="$store.state.user" class="sn-myorder">
          <a @click="$router.push('/shop_order')">我的订单</a>
          |
        </li>
        <li class="sn-myphone">
          <a href="#">手机版</a>
<!--          <img src="~@/assets/imgs/weChat_index.png" alt="">-->
          |
        </li>
        <li class="sn-nav">
          <a>网站导航</a>
          |
        </li>
      </ul>
    </div>
    <!--icon和搜索区域-->
    <div class="shopicon">
      <img src="../../assets/imgs/favicon1.png" alt="">
    </div>
    <div class="search">
      <label>
        <input class="search-input" type="text"/>
        <button class="search-button" type="submit">搜索</button>
      </label>
    </div>
<!--对话框提示-->
    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%">
    <span style="color: black">您还没登录，请完成登录，再进行操作！</span>
    <span slot="footer" class="dialog-footer">
    <el-button  @click="dialogVisible = false">取 消</el-button>
    <el-button style="background: rgb(255, 0, 54); color: white" @click="toLogin">去登录</el-button>
  </span>
  </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'topbar',
  data() {
    return {
      //  是否激活
      is_active: true,
      //  对话框是否展示
      dialogVisible: false
    }
  },
  components: {
  },
  methods: {
    //  登陆方法
    toLogin() {
      // this.dialogVisible = true
      this.$router.push('/shop_login')
    },
    //  退出登陆方法
    toLoginOut() {
      this.$store.commit('removeStorage')
      this.$router.push('/shop_login')
    },
    //  注册方法
    toReg() {
      this.$router.push('/shop_register')
    },
    //  去购物车
    toCart() {
      if (this.$store.state.user) {
        this.$router.push('/cart')
      } else {
        this.dialogVisible = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
    font-family: Microsoft YaHei, serif, tahoma;
    /*background-color: #f1f1f1;*/

    > em {
      font-style: normal;
      color: rgb(255, 0, 54);
      margin: auto;
    }
  }
  .sn {
    margin-bottom: 40px;
    font-size: 14px;
    height: 32px;
    width: 100%;
    background-color: #f1f1f1;
    line-height: 32px;
    position: relative;

    > .sn-login-info {
      display: inline-block;

      > em {
        font-style: normal;
        margin: 0 10px;
      }
    }

    > .sn-login,
    .sn-register {
      margin: 0 10px 0;
      cursor: pointer;
    }

    .sn-login-a {
      margin: 0 10px 0 0;
      color: rgb(255, 0, 54);
    }

    > .sn-quick-menu {
      position: relative;
      /*float: right;*/
      display: inline;
      clear: both;
      float: right;
      right: 50px;
      cursor: pointer;

      > li {
        clear: both;
        display: inline;
        margin: 0 10px;
        right: 10px;
        /*position:absolute;*/
      }
    }
  }

  .sn-quick-menu > li > a:hover, .sn-login:hover, .sn-register:hover {
    color: rgb(255, 0, 54);
  }

  .shopicon {
    margin-left: 10%;
    width: 390px;
    height: 130px;
    /*background-color: red;*/
    position: relative;
    text-align: center;
    display: inline-block;
    margin-top: 20px;
    line-height: 130px;

    > img {
      height: 100%;
    }
  }

  .search {
    margin-left: 3%;
    font-size: 0;
    display: inline-block;
    width: 76%;
    float: right;
    position: absolute;
    line-height: 130px;
    margin-top: 20px;
    /*background-color: cyan;*/
    /*margin: 20%;*/
  }

  .search-input {
    width: 38%;
    height: 32px;
    line-height: 36px;
    border: 2px solid rgb(255, 0, 54);
    outline: none;
    font-size: 16px;
    position: relative;
    top: 2px;
    padding: 2px 2px 2px 8px;
  }

  .search-button {
    line-height: 36px;
    width: 10%;
    height: 40px;
    font-size: 18px;
    color: #ffffff;
    border: 2px solid rgb(255, 0, 54);
    top: 3px;
    position: relative;
    background-color: rgb(255, 0, 54);
    outline: none;
    padding: 0;
  }
  .search-button:after {
    border: none;
  }
  /*.el-dialog__body{*/
  /*  color: chocolate;*/
  /*  >.el-button{*/
  /*    background: rgb(255,0, 54);*/
  /*    color: white;*/
  /*  }*/
  /*  >.el-button:hover{*/
  /*    opacity: 0.5;*/
  /*  }*/
  /*}*/
</style>
